<template>
  <div class="block">
    <el-cascader
      v-model="selectMenuId"
      :options="options"
      :props="{ value: 'id', label: 'name', children: 'menuTwo', checkStrictly: true, expandTrigger: 'hover', emitPath: false }"
      clearable
      @change="indexSelect"
    />
  </div>
</template>

<script>
import { menuList } from '@/api/rbac'

export default {
  name: 'SearchOptionMenu',
  props: {
    menuId: {
      required: false,
      type: String
    }
  },
  data() {
    return {
      options: [],
      selectMenuId: this.menuId
    }
  },
  watch: {
    menuId: {
      handler(newVal, oldVal) {
        this.selectMenuId = newVal
      }
    }
  },
  created() {
    this.remoteSearch()
  },
  methods: {
    remoteSearch() {
      menuList().then(res => {
        this.options = res.data
      })
    },
    indexSelect: function() {
      this.$emit('setSearchMenuId', { menuId: this.selectMenuId })
    }
  }
}
</script>
